<template>
	<view class="container">
		<nav-bars class="nav_bar navBarApp" :titleCenter="false" backState="2000" bgColor="transparent" fontColor="#fff">
			<view class="nav_center">
				<view class="title-text" @click="handleAccomplish">完成</view>
			</view>
		</nav-bars>	
		<view class="title">
			<!-- <view class="title-text" @click="handleAccomplish">完成</view> -->
			<u-top-tips ref="uTips"></u-top-tips>
			<view class="logo">
				<u-avatar :src="avatar" mode="circle" size="large" @click="handleAvatar(1)"></u-avatar>		
				<view class="logo-text">点击更换店铺头像</view>
			</view>
		</view>
		<view class="content">
			<view class="detail">
				<view class="name">
					<text>店铺名称</text>
					<view class="name-input">
						<input type="text" v-model="list.title" class="title-input" placeholder="点击填写" placeholder-style="font-size:24rpx;text-align:right;color:#D8D8D8"/>
						<text class="iconfont icon-jinru"></text>
					</view>					
				</view>
				<view class="name">
					<text>主页背景</text>
					<view class="name-input" @click="handleAvatar(2)">
						<image :src="backImg" mode="" class="logo-bg"></image>
						<text class="iconfont icon-jinru"></text>
					</view>						
				</view>
				<view class="name">
					<text>个性签名</text>
					<!-- <text style="color: #D8D8D8;">0/100</text> -->
				</view>
				<view class="textarea">
				     <textarea v-model="list.sign" placeholder-style="color:#D8D8D8" placeholder="填写简介让别人快速了解您的店铺~"/>
				</view>
			</view> 
		</view>
	</view>
</template>
<script>
	import URL from '@/config/url.js'
	export default {
	
		data(){
			return{
				baseImg:this.$static,
				list:{},
				avatar: '',
				avatar_id:null,
				backImg:'',
				backImg_id:null
			}
		},
		created() {
			let sid = this.$store.state.index.sid
			let params = {
				designer_id:sid
			}
			this.$api.designer_getDetail(params).then(res=>{
				console.log(res,"shuju----")
				if(res.code==1){
					this.list = res.data
					this.avatar =  res.data.avatar.path
					this.avatar_id = res.data.avatar.id
					this.backImg =  res.data.back_thumb_url.path
					this.backImg_id = res.data.back_thumb_url.id
					
				}
			})

		},
		methods:{
			handleAvatar(num){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									if(num==1){ //1头像，2背景
										this.avatar = data.data.url;
										this.avatar_id = data.data.id;
									}else{
										this.backImg = data.data.url;
										this.backImg_id = data.data.id;
									}
									console.log(this.list)
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
			handleAccomplish(){
				let sid = this.$store.state.index.sid 
				let params = {
					designer_id:sid,
					title:this.list.title,
					avatar:this.avatar_id,
					back_thumb_url:this.backImg_id,
					sign:this.list.sign
				}
				this.$api.designer_edit(params).then(res=>{
					console.log(res,888)
					if(res.code ==1){
						uni.showToast({
							title:'修改成功',
							icon:'success'
						})
						
						// 触发修改成功后首页信息事件
						uni.$emit('changeInfo',true)
					}
				})
			}
		}
	}
</script>

<style scope lang="less">
	.container{
		width: 750rpx;
		height: 100%;		
		background-color: #F8F8F8;
		position: relative;
		.title{
			background: url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat;
			// background-size: 100% 538rpx;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 538rpx;
			border-radius: 0 0 2em 2em;
			color: #fff;
			// padding-top: 88rpx;
			.title-text{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 40rpx;
				padding: 16rpx 0 0 28rpx;
				
			}
			.logo{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				position: absolute;
				top: 220rpx;
				left: 0;
				.logo-img{
					width: 160rpx;
					height: 160rpx;
					background: rgba(0, 0, 0, 0);
					border: 6rpx solid #FFFFFF;
					border-radius: 50%;
					margin-bottom: 24rpx;
					margin-top: 76rpx;
				}
			}
			
					
			.u-avatar-wrap {
				margin-top: 80rpx;
				overflow: hidden;
				margin-bottom: 80rpx;
				text-align: center;
			}
					
			.u-avatar-demo {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100rpx;
			}
		}
		.content{
			// border-radius: 16rpx;
			position: absolute;
			left: 0;
			top: 480rpx;
			padding: 0 24rpx 156rpx 24rpx;
			.detail{
				width: 702rpx;
				border-radius: 16rpx;
				padding: 40rpx 26rpx 40rpx 28rpx;
				background: #fff;
				font-size: 26rpx;
				.name{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 48rpx;
					.name-input{
						display: flex;
						justify-content: center;
						align-items: center;
						.logo-bg{
							width: 72rpx;
							height: 72rpx;
							margin-right: 20rpx;
						}
						.title-input{
							text-align: right;
							margin-right: 20rpx;
						}
					}
					.icon-jinru{
						color: #D8D8D8;
						font-size: 26rpx;
					}
				}
				.textarea{
					background: #F8F8F8;
					padding: 24rpx;
				}
			}
		}
	}
	
</style>
